<template>
  <div class="wrapper">
    <div class="left-page">
      <baidu-map class="map" :center="{lng: 114.835, lat: 36.60}" :zoom="12" :min-zoom='10' :max-zoom='14' :scroll-wheel-zoom="true">
        <!-- 114.847937,36.615492 -->
        <bm-boundary
          name="肥乡区"
          :strokeWeight="2"
          strokeColor="#2b88ff"
          fillColor="#2b88ff"
          :fillOpacity="0.1"
        ></bm-boundary>
        <bm-marker
          v-for="(item,index) in dataList"
          :key="index"
          :position="{ lng: item.locateX, lat: item.locateY }"
          animation="BMAP_ANIMATION_DROP"
          :icon="item.icon"
          @click="openDialog('ProcessingDialog',{item})"
        ></bm-marker>
      </baidu-map>
      <div class="fugai-box">
        <div class="fugai">
          <div>
            <div class="title">受理</div>
            <div class="value">{{centerData.receive||'-'}}</div>
          </div>
          <div>
            <div class="title" @click="demo">结案</div>
            <div class="value">{{centerData.end||'-'}}</div>
          </div>
        </div>
        <img @click="openDialog('sjzxSearchPopover')" class="img-search" src="../../assets/incidentCenter/search_ round.png" alt>
        <div class="searchPopover">
          <SearchPopover @onSubmit="getList"/>
        </div>
      </div>
    </div>
    <div class="right-page">
      <XxzxRow/>
      <SjflStat/>
    </div>
    <ProcessingDialog @callBack="getList"/>
    <Notification v-for="(item,index) in messageList" :key='index' :index='index' :item="item" @closeCallback="closeNotification" @onClick="viewNotification(item)"/>
  </div>
</template>
<script>
import Pubsub from "../../utils/pubsub";
import { eventInfoCenterWorkbenchQueryAll,eventInfoCenterWorkbenchStatistics,testApi } from "../../config/api";
import classCode1 from "../../assets/incidentCenter/classCode1.png";//事件类别
import classCode2 from "../../assets/incidentCenter/classCode2.png";
import classCode3 from "../../assets/incidentCenter/classCode3.png";
import classCode4 from "../../assets/incidentCenter/classCode4.png";
import classCode5 from "../../assets/incidentCenter/classCode5.png";
import classCode6 from "../../assets/incidentCenter/classCode6.png";
import XxzxRow from "../../components/incidentCenter/xxzxRow.vue"; //消息中心
import SjflStat from "../../components/incidentCenter/sjflStat.vue"; //事件分类统计
import SearchPopover from "../../components/incidentCenter/searchPopover"; //搜索弹窗
import Notification from "../../components/common/notification"; //消息弹窗
import ProcessingDialog from "../../components/incidentCenter/processingDialog.vue"; //点击地图弹窗

export default {
  components: {
    XxzxRow,
    SjflStat,
    SearchPopover,
    ProcessingDialog,
    Notification,
  },
  data() {
    return {
      keywords: "",
      dbList: [],
      messageList: [],//消息列表
      dataList:[],
      centerData:{},
      // points: [
      //   { lng: 114.82817, lat: 36.578868 },
      //   { lng: 114.782972, lat: 36.529699 },
      //   { lng: 114.887606, lat: 36.543154 }
      // ] //点的位置
    };
  },
  mounted() {
    //WORKBENCH_STATISTICS工作台数量统计ws
    this.pubsub_token = Pubsub.subscribe("WORKBENCH_STATISTICS", (type, values) => {
      this.getCenter();
    });
    //ADD事件上报ws
    this.pubsub_token = Pubsub.subscribe("ADD", (type, values) => {
      this.EReport(values||{});
      console.log('values',values);
    });
    //待办事项列表
    this.getList();
    this.getCenter();
  },
  methods: {
    demo(){
      console.log('websocket测试');
      //websocket测试
      // testApi({id:'cb57f7fda16040d38dc901ef945c6547'}).then((res = {}) => {
      //   console.log(res);
      //   });
    },
    EReport(values){
      let {messageList=[]}=this;
      messageList.push(values);
      this.messageList=messageList;
    },
    viewNotification(item){
      this.openDialog('ProcessingDialog', {item});
      this.closeNotification();
    },
    openDialog(type, values) {
      if(type=='ProcessingDialog'){
        switch (values.item.eventStatusCode){
          case '1':
            values.btnType=['sl'];
            break;
          case '2':
            values.btnType=['sb','pf','ja'];
            break;
          case '3':
            values.btnType=[];
            break;
          default:
            values.btnType=['db','ja'];
        }
      }
      	Pubsub.publish(type, values);
    },
    getList(data) {
      //城管pc端工作台查询所有事件classBigCode
      eventInfoCenterWorkbenchQueryAll(data||{}).then((res = {}) => {
        console.log(res.data);
        if(res.data&&res.data.length){
          res.data.map(item=>{
            item.icon={ url: require(`../../assets/incidentCenter/classCode${item.classBigCode>6?'':item.classBigCode}.png`), size: { width: 40, height: 50 } }
          })
        }
          this.dataList = res.data;
        });
    },
    getCenter(){
      //城管pc端-工作台数量统计
      eventInfoCenterWorkbenchStatistics().then(res=>{
          this.centerData = res.data;
      })
    },
    closeNotification(){
      let {messageList=[]}=this;
      messageList.splice(0, 1);
      this.messageList=messageList;
    }
  }
};
</script>

<style lang="scss" scoped>
.wrapper {
  display: flex;
}
.left-page {
  flex: 3;
  position: relative;
  // padding: 20px 30px 20px 20px;
}
.fugai-box {
  position: absolute;
  top: 46px;
  left: 50%;
  box-sizing: border-box;
}
.fugai {
  position: absolute;
  left: -250px;
  width: 500px;
  min-height: 114px;
  border-radius: 8px;
  box-shadow: 4px 4px 6px #a5a5a5;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  > div {
    text-align: center;
    padding: 20px 17px;
    width: 140px;
    .title {
      color: #333;
      font-size: 18px;
      border-bottom: 1px solid #eee;
      padding-bottom: 10px;
    }
    .value {
      padding-top: 10px;
      font-size: 20px;
      color: #ffaa00;
      font-weight: 400;
    }
  }
}
.img-search {
  position: absolute;
  width: 164px;
  left: -82px;
  top: -25px;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.1s;
  &:active {
    opacity: 0.6;
  }
  &:hover {
    opacity: 0.9;
  }
}
.searchPopover {
  position: absolute;
  top: 137px;
}
.right-page {
  flex: 1;
  background: rgb(245, 243, 240);
  height: calc(100vh - 140px);
  box-sizing: border-box;
  // padding: 25px 30px 0 30px;
}
.map {
  width: 100%;
  height: 100%;
  height: calc(100vh - 120px);
  min-height: 690px
}
</style>
